<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在线购物</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 强制竖屏 -->
		<meta name=screen-orientation content=portrait>
		<meta name=x5-orientation content=portrait>
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="yes">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true">
		<!-- UC应用模式 -->
		<meta name="browsermode" content="application">
		<!-- QQ应用模式 -->
		<meta name="x5-page-mode" content="app">
		<!-- IOS启用 WebApp 全屏模式 -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- IOS全屏模式下隐藏状态栏/设置状态栏颜色 content的值为default | black | black-translucent -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 去除iphone 识别数字为号码邮箱跳转地图 -->
		<meta name="format-detection" content="telephone=no,email=no,adress=no">
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/shopping.css">
		<script src="../js/jquery1.7.js"></script>
		<script src="../js/rem.js"></script>
		<!--[if lt IE 9]>
	         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	      <![endif]-->
	</head>
	<body style="background-color: #fff;">
		<!--container-->
		<section id="list" class="wrap">
			<div class="shop_top">
				<div class="shop_img">
					<img class="commonImg fl" src="../img/back.png" alt="">
					<img class="commonImg rt" src="../img/shop_more.png" alt="">
				</div>
			</div>
			<div class="shop_center">
				<div class="center_top">
					<div>唯品会</div>
					<p>唯品会</p>
				</div>
				<div class="center_c">
					<div class="fl" id="chatEvent">
						<img class="commonImg" src="../img/shop_chat.png" alt="">
						<p>聊天</p>
					</div>
					<div class="rt">
						<img class="commonImg" src="../img/add.png" alt="">
						<p>添加</p>
					</div>
				</div>
			</div>
			<ul class="shop_list">
				<li>
					<p class="title">企业帐号</p>
					<p class="content">12520040100202</p>
				</li>
				<li>
					<p class="title">账户主题</p>
					<p class="content">chinamobiletest</p>
				</li>
				<li>
					<p class="title">短信客服</p>
					<p class="content">106571203825</p>
					<img src="../img/shop_chat.png" alt="">
				</li>
			</ul>
		</section>
		<section style="padding-bottom: 2rem;" id="detail" class="wrap">
			<div id="scroll">
				<div class="detail_top">
					<div class="fl">
						<img class="commonImg" src="../img/footer_back.png" alt="">
						<span>唯品会</span>
					</div>
					<div class="rt">
						<img class="commonImg" style="margin-right:.3rem" src="../img/detail_search.png" alt="">
						<img class="commonImg" src="../img/detail_more.png" alt="">
					</div>
				</div>
				<div class="detail_tag">
					<p class="fl">添加到我的聊天机...</p>
					<p class="rt">添加至黑名单</p>
				</div>
				<p class="dates">2019年6月26日星期三</p>
				<div class="only">
					<p class="text rt">你好</p>
					<p class="date rt">11:49</p>
				</div>
				<div class="kefu">
					<div class="head">唯品会</div>
					<p class="txt">您好，我是唯品智能客服，别认错机器人呦～～</p>
					<p class="data">18:44</p>
				</div>
				<div class="only" id="payTxt" style="display: none;">
					<p class="text rt">优惠</p>
					<p class="date rt">11:49</p>
				</div>
				<div class="fixdBtn">
					<div id="fixdBtnOne">
						<p style="margin-left:.1rem;">客服</p>
						<p id="payEvent">优惠</p>
					</div>
					<div style="display: none;" id="fixdBtnTwo">
						<p class="txt">飞利浦品牌日特价预定，去看看</p>
					</div>
					<!-- <div id="fixdBtnThree" style="display: none;">
						<p>换一批</p>
					</div> -->
				</div>
				<div class="kefu" style="display: none;" id="kefuImg">
					<div class="head">唯品会</div>
					<img class="fl" style="margin-left:.1rem;width:5rem;" src="../img/banner.jpg" alt="">
					<p class="dataFixed">18:44</p>
				</div>
				<div class="only" style="display: none;" id="payTxts">
					<p class="text rt" style="width:4.3rem">飞利浦品牌日特价预定，去看看</p>
					<p class="date rt">11:49</p>
				</div>
				<div class="kefu" style="display: none;" id="kefuImgs">
					<div class="head">唯品会</div>
					<div class="layout">
						<ul class="shoplist">
							<li>
								<img src="../img/banner1.jpg" alt="">
								<p class="tit">飞利浦情侣电动牙刷</p>
								<p class="common">折扣价：¥399</p>
								<p class="common">情侣礼盒升级版，两支装共6支牙刷头，23000次没分钟，有效改善牙龈健康</p>
								<div class="liBtn" id="liBtn">预定</div>
							</li>
							<li>
								<img src="../img/banner2.jpg" alt="">
								<p class="tit">飞利浦空气净化器AC4552</p>
								<p class="common">折扣价：¥3099</p>
								<p class="common">情侣礼盒升级版，两支装共6支牙刷头，23000次没分钟，有效改善牙龈健康</p>
								<div class="liBtn" id="liBtn">预定</div>
							</li>
							<li>
								<img src="../img/banner3.jpg" alt="">
								<p class="tit">飞利浦扫地机器人</p>
								<p class="common">折扣价：¥1476</p>
								<p class="common">广角进风19个传感器，TriActiveXL吸嘴6厘米纤巧设计，4轮系统</p>
								<div class="liBtn" id="liBtn">预定</div>
							</li>
						</ul>
					</div>
					<p class="dataFixeds">18:44</p>
				</div>
				<div class="only" style="display: none;" id="sureId">
					<p class="text rt">预定</p>
					<p class="date rt">11:49</p>
				</div>
				<div class="kefu" style="display: none;" id="kefuz">
					<div class="head">唯品会</div>
					<p class="txt">恭喜您成功预定飞利浦情侣电动牙刷！商品将于2019年06月19日 10:00 开启付款流程。感谢您选择唯品会</p>
					<p class="dataEnd">18:44</p>
				</div>
			</div>
		</section>
		<footer style="display: none;" id="footer">
			<div class="footerBox">
				<div class="fl">
					<img class="commonImgs fl" style="margin-top:.02rem;" src="../img/detail_add.png" alt="">
					<p class="fr">输入聊天信息</p>
				</div>
				<div class="rt">
					<img class="commonImgs" style="margin-right:1rem" src="../img/emoji.jpg" alt="">
					<div class="talk">
						<img src="../img/talk_inner.png" alt="">
					</div>
				</div>
			</div>
		</footer>
	</body>
	<script type="text/javascript">
        $("#chatEvent").click(function(){
			$("#detail").css('display','block');
			$('#footer').css('display', 'block')
			$('#list').css('display', 'none')
		});
		$('#payEvent').click(function(){
			$("#payTxt").css('display','block');
			$('#payTxt').addClass('post-list-row');
			setTimeout(function(){
				$('#kefuImg').css('display','block');
				$('#kefuImg').addClass('post-list-row');
				$('#fixdBtnOne').css('display','none');
				$('#fixdBtnTwo').css('display','block');
			}, 1500);
		})
		$('#fixdBtnTwo').click(function(){
			$("#payTxts").css('display','block');
			$('#payTxts').addClass('post-list-row');
			$('#fixdBtnTwo').css('display','none');
			setTimeout(function(){
				$('#kefuImgs').css('display','block');
				$('#kefuImgs').addClass('post-list-row');
				// $('#scroll').scrollTop(180);
				$(document).scrollTop(180);
			}, 1000);
		})
		$('#liBtn').click(function(){
			$('#sureId').css('display', 'block');
			$('#sureId').addClass('post-list-row');
			$('#fixdBtnThree').css('display','none')
			setTimeout(function(){
				$('#kefuz').css('display','block');
				$('#kefuz').addClass('post-list-row');
				$(document).scrollTop(360);
			}, 1000);
		})
	</script>
</html>
